<template>
  <div class="project-form">
    <el-form :model="projectForm" label-width="100px">
      <el-form-item label="项目名称" required>
        <el-input v-model="projectForm.name"></el-input>
      </el-form-item>
      <el-form-item label="项目分类" required>
        <el-select v-model="projectForm.categoryId" placeholder="选择项目分类">
          <el-option
            v-for="category in categories"
            :key="category.id"
            :label="category.name"
            :value="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目描述">
        <el-input type="textarea" v-model="projectForm.description"></el-input>
      </el-form-item>
      <el-form-item label="项目经理" required>
        <el-select v-model="projectForm.manager" placeholder="选择项目经理">
          <el-option label="张三" value="张三"></el-option>
          <el-option label="李四" value="李四"></el-option>
          <el-option label="王五" value="王五"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目成员">
        <el-select v-model="projectForm.members" multiple placeholder="选择项目成员">
          <el-option label="张三" value="张三"></el-option>
          <el-option label="李四" value="李四"></el-option>
          <el-option label="王五" value="王五"></el-option>
          <el-option label="赵六" value="赵六"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止时间" required>
        <el-date-picker
          v-model="projectForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="项目状态">
        <el-select v-model="projectForm.status" placeholder="选择状态">
          <el-option label="待启动" value="pending"></el-option>
          <el-option label="进行中" value="in-progress"></el-option>
          <el-option label="已完成" value="completed"></el-option>
          <el-option label="已暂停" value="paused"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="form-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, toRefs, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  type: {
    type: String,
    default: 'create' // create 或 edit
  },
  initialData: {
    type: Object,
    default: () => ({
      name: '',
      description: '',
      manager: '',
      members: [],
      dateRange: [],
      status: 'pending',
      categoryId: null
    })
  },
  categories: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['cancel', 'save'])

// 项目表单数据
const projectForm = reactive({ ...props.initialData })

// 取消操作
const cancel = () => {
  emit('cancel')
}

// 保存操作
const save = () => {
  // 表单验证
  if (!projectForm.name || !projectForm.manager || !projectForm.dateRange || 
      projectForm.dateRange.length !== 2 || !projectForm.categoryId) {
    ElMessage.warning('请填写必填项')
    return
  }

  // 构建项目数据
  const projectData = {
    name: projectForm.name,
    description: projectForm.description,
    manager: projectForm.manager,
    members: projectForm.members,
    startDate: projectForm.dateRange[0],
    endDate: projectForm.dateRange[1],
    status: projectForm.status,
    categoryId: projectForm.categoryId
  }

  // 通过事件将数据传递给父组件
  emit('save', projectData)
}
</script>

<style scoped>
.project-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-footer {
  margin-top: auto;
  padding: 10px 0 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 